<script>
  import * as d3 from 'd3';
  const data = [99, 71, 78, 25, 36, 92];
  export default {
    name: 'non-vue-line-chart',
    template: '<svg width="100" height="32"></svg>',
    mounted() {

      var data = [100,321,50,100,80];
      var svg_height = 32;
      var svg_width = 100;
      var d = svg_width / data.length;
      //比例尺
      var scale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, svg_height]);
      //区域生成函数
      var area_generator = function(x,i) {
        var offset = -1;
        var area_data = data.map( function(y) {
          offset ++;
          //去除左右stroke
          if( offset == 0 ) return [-5, svg_height - scale(y)];
          if( offset == data.length - 1 ) return [offset * d + 30, svg_height - scale(y)];
          return [offset * d, svg_height - scale(y)];
        } );
        //去除下stroke
        var area = d3.area().y0(svg_height+10);
        return area(area_data);
      };
      setTimeout( function() {
        // area
        const svg = d3.select(this.$el)

        d3.select('svg')
          .data(data)
          .append('path')
          .attr('stroke', 'rgb(66, 132, 243)')
          .attr('fill', 'rgba(66, 132, 243, 0.2)')
          .attr('d', area_generator);
      }, 300 );
    },
  };
</script>
<style>



</style>
